<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
    </h:head>
    <h:body style="text-align:left">
        <p:growl id="mensajes"  life="10000" />
        <h:form id="form">

            <p:tabView>
                <p:tab title="Consultar">
                    <h:panelGrid columns="2" cellpadding="10">  

                        <p:dataTable id="tablaCiudad" paginatorAlwaysVisible="true"                                                          
                                     var="obj" value="#{ciudadBean.listaCiudades}" paginator="true" 
                                     paginatorPosition="bottom"                                     
                                     emptyMessage="No se han encontrado registros"
                                     rows="3" filteredValue="#{ciudadBean.listaCiudadesFiltro}" 
                                     widgetVar="codigoFiltro" scrollable="true"  scrollWidth="true" scrollHeight="150"
                                     liveScroll="true">

                            <f:facet name="header">
                                <p:outputPanel>
                                    <h:outputText value="Buscar: " />
                                    <h:inputText id="globalFilter" onkeyup="PF('codigoFiltro').filter()" />                                  
                                </p:outputPanel>
                            </f:facet>

                            <p:column  filterBy="#{obj.codigo}" headerText="Código">
                                <h:outputText value="#{obj.codigo}" />
                            </p:column>

                            <p:column filterBy="#{obj.nombre}" headerText="Nombre">
                                <h:outputText value="#{obj.nombre}" />
                            </p:column>   

                            <p:column headerText="Acción">
                                <p:commandButton value="Eliminar " onclick="PF('cd').show()"  />

                                <p:confirmDialog id="dlgEliminar" message="Desea eliminar el registro # #{obj.codigo} ?" 
                                                 header="Eliminar" severity="alert"
                                                 widgetVar="cd">

                                    <p:commandButton value="Aceptar" actionListener="#{ciudadBean.delete(obj.codigo)}" icon="ui-icon-pencil"  oncomplete="handleRequest(xhr, status, args);PF('cd').hide()" />


                                    <script type="text/javascript">
                                        function handleRequest(xhr, status, args) {
                                            if (args.suceso) {
                                                alert('Registro eliminado correctamente');
                                            }else{
                                                alert('Ha ocurrido un error al intentar guardar');
                                            }
                                        }
                                    </script>   

                                    <p:commandButton value="Cancelar" onclick="PF('cd').hide();" />

                                </p:confirmDialog>

                                <p:commandButton value="Modificar" action="#{ciudadBean.agregarCiudad()}"/> 
                            </p:column>   

                        </p:dataTable>                   
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Incluir">
                    <h:panelGrid columns="2" cellpadding="10">

                        <h:panelGrid columns="2" cellpadding="5">

                            <h:outputLabel for="codigo" value="Codigo:" />
                            <p:inputText value="0" disabled="true" id="codigo" required="true" label="codigo" />

                            <h:outputLabel for="nombre" value="Nombre:" />
                            <p:inputText value="#{ciudadBean.nombre}" id="nombre"  label="nombre" />

                        </h:panelGrid>


                        <f:facet name="footer">
                            <h:commandButton value="Guardar" action="#{ciudadBean.insertar()}"/>  


                        </f:facet>

                    </h:panelGrid>
                </p:tab>                
            </p:tabView>
        </h:form>
    </h:body>
</html>